<template>
  <div>
    <div class="profile-item">
      <div v-if="!item.isFirst" class="div-align-justify-center">
        <img class="img-48-circle" :src="item.avatar" alt=""/>
      </div>
      <div v-if="item.isFirst" class="div-align-justify-center first-profile-item-img">
        <img class="img-48-circle" :src="item.avatar" alt=""/>
      </div>
      <div class="profile-item-content">
        <div class="profile-item-content-item body-heavy">{{ item.name }}</div>
        <div class="profile-item-content-item paragraph-p2-light color-grey">
          {{ item.phone ? item.phone : item.money ? '$' + item.money : '' }}
        </div>
      </div>
      <div class="profile-item-arrow" @click="info">
        <img class="icon-16" src="@/static/icon/chevron_right.png" alt=""/>
      </div>
    </div>
  </div>
</template>

<script>
import UserAvatar from '@/static/images/profile/user-default.jpg'
export default {
  name: "ReportSaleItem",
  props: {
    item: { type: Object, default: () => ({
        id: {type: Number, default: () => (0)},
        avatar: {type: String, default: () => ('')},
        name: {type: String, default: () => ('')},
        money: {type: Number, default: () => (0)},
        phone: {type: String, default: () => ('')},
        isFirst: {type: Boolean, default: () => false},
      })
    },
    listCode: {type: Number, default: () => this.GLOBAL.listType.profile},
    listItemCode: { type: Number, default: () => this.GLOBAL.listItemType.profile.onJob},
  },
  components:{},
  mounted() {
  },
  data() {
    return{
      defaultAvatar: UserAvatar,
    }
  },
  methods: {
    info() {
      switch (this.listCode) {
        case this.GLOBAL.listType.profile:
          this.$router.push(this.GLOBAL.pathSetting.profile.info + this.item.id)
          break
        case this.GLOBAL.listType.cycle:
        case this.GLOBAL.listType.performance:
          this.$router.push("/report/total?userId=" + this.item.id + '&name=' + this.item.name)
          break
      }
    },
  },
}
</script>

<style scoped>
.profile-item {
  display: flex;
  flex-direction: row;
  margin: 16px 0;
}
.first-profile-item-img {
  border: 2px solid #FCD538;
  border-radius: 48px;
  box-sizing: border-box;
}
.profile-item-content {
  width: 340px;
  /*height: 46px;*/
}
.profile-item-content-item {
  /*height: 20px;*/
  margin: 4px 0 4px 8px;
}
.profile-item-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>